
$(function () {
  (function () {
    $('.monitor .tabs').on('click', 'a', function () {
      $(this).addClass('active').siblings().removeClass('active');
      $('.monitor .content').eq($(this).index()).show().siblings('.content').hide();
    });

    //克隆marquee里面所有的行（row）
    $('.marquee-view .marquee').each(function () {
      var rows = $(this).children().clone();
      $(this).append(rows);
    });
  })();
});


$(function () {
  (function () {
    //实例化对象
    var myChart = echarts.init(document.querySelector('.pie'));

    //指定配置项和数据
    var option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      // 注意颜色写的位置
      color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
      series: [
        {
          name: '点位统计',
          type: 'pie',
          // 如果radius是百分比则必须加引号
          radius: ['10%', '70%'],
          center: ['50%', '50%'],
          roseType: 'radius',
          data: [
            { value: 20, name: '甘肃' },
            { value: 26, name: '北京' },
            { value: 24, name: '山东' },
            { value: 25, name: '河北' },
            { value: 20, name: '内蒙古' },
            { value: 25, name: '山西' },
            { value: 36, name: '河北' },
            { value: 36, name: '四川' }
          ],
          // 修饰饼形图文字相关的样式 label对象
          label: {
            fontSize: 10
          },
          // 修饰引导线样式
          labelLine: {
            // 连接到图形的线长度
            length: 6,
            // 连接到文字的线长度
            length2: 8
          }
        }
      ]
    };

    //  配置项和数据给我们的实例化对象
    myChart.setOption(option);

    // 4当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener('resize', function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();
});

// 用户统计模块
$(function () {
  (function () {
    var item = {
      name: '',
      value: 100,
      // 1. 修改当前柱形的样式
      itemStyle: {
        color: '#254065'
      },
      // 2. 鼠标放到柱子上不想高亮显示
      emphasis: {
        itemStyle: {
          color: '#254065'
        }
      },
      // 3. 鼠标经过柱子不显示提示框组件
      tooltip: {
        show: false
      }
      // tooltip: {
      //   extraCssText: 'opacity: 0'
      // }
    };
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector('.bar'));
    // 2. 指定配置和数据
    var option = {
      color: new echarts.graphic.LinearGradient(
        // (x1,y2) 点到点 (x2,y2) 之间进行渐变
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: '#00fffb' }, // 0 起始颜色
          { offset: 1, color: '#0061ce' } // 1 结束颜色
        ]
      ),
      tooltip: {
        trigger: 'item'
      },
      grid: {
        left: '0%',
        right: '3%',
        bottom: '3%',
        top: '3%',
        //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
        containLabel: true,
        // 是否显示直角坐标系网格
        show: true,
        //grid 四条边框的颜色
        borderColor: 'rgba(0, 240, 255, 0.3)'
      },
      xAxis: [
        {
          type: 'category',
          data: ['北京', '辽宁', '河北', '山西', '甘肃', '', '......', '上海', '湖北', '内蒙古', '陕西', '四川'],
          axisTick: {
            alignWithLabel: false,
            // 把x轴的刻度隐藏起来
            show: false
          },
          // x轴文字的颜色
          axisLabel: {
            color: '#4c9bfd'
          },
          // x轴这条线的颜色样式
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 240, 255, 0.3)'
              // width: 3
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisTick: {
            alignWithLabel: false,
            // 把y轴的刻度隐藏起来
            show: false
          },
          axisLabel: {
            color: '#4c9bfd'
          },
          // y轴这条线的颜色样式
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 240, 255, 0.3)'
              // width: 3
            }
          },
          // y轴分割线的颜色样式
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 240, 255, 0.3)'
            }
          }
        }
      ],
      series: [
        {
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: [92, 116, 131, 85, 42, item, item, item, 64, 129, 54, 76, 132]
        }
      ]
    };
    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener('resize', function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();
});


$(function () {
  (function () {
    // (1)准备数据
    var data = {
      year: [
        [24, 40, 101, 168, 100, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 162, 95, 330, 200, 213, 131, 200, 180, 79]
      ],
      quarter: [
        [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
      ],
      month: [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 32],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 30]
      ],
      week: [
        [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 52]
      ]
    };
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector('.line'));
    // 2. 指定配置和数据
    var option = {
      color: ['#00f2f1', '#ed3f35'],
      tooltip: {
        // 通过坐标轴来触发
        trigger: 'axis'
      },
      legend: {
        // 距离容器10%
        right: '10%',
        // 修饰图例文字的颜色
        textStyle: {
          color: '#4c9bfd'
        }
        // 如果series 里面设置了name，此时图例组件的data可以省略
        // data: ["邮件营销", "联盟广告"]
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        show: true,
        borderColor: '#012f4a',
        containLabel: true
      },

      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        // 去除刻度
        axisTick: {
          show: false
        },
        // 修饰刻度标签的颜色
        axisLabel: {
          color: '#4c9bfd'
        },
        // 去除x坐标轴的颜色
        axisLine: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        // 去除刻度
        axisTick: {
          show: false
        },
        // 修饰刻度标签的颜色
        axisLabel: {
          color: '#4c9bfd'
        },
        // 修改y轴分割线的颜色
        splitLine: {
          lineStyle: {
            color: '#012f4a'
          }
        }
      },
      series: [
        {
          name: '本科',
          type: 'line',
          // 是否让线条圆滑显示
          smooth: true,
          data: data.year[0]
        },
        {
          name: '专科',
          type: 'line',
          smooth: true,
          data: data.year[1]
        }
      ]
    };
    // 3. 把配置和数据给实例对象
    myChart.setOption(option);
    // 4. tab切换效果制作
    // (2) 点击切换效果
    $('.sales .caption').on('click', 'a', function () {
      // 点击当前a 高亮显示 调用active
      $(this).addClass('active').siblings('a').removeClass('active');
      var arr = data[this.dataset.type];
      option.series[0].data = arr[0];
      option.series[1].data = arr[1];
      myChart.setOption(option);

      // 此时要注意这个索引号的问题
      index = $(this).index() - 1;
    });

    // 5. tab栏自动切换效果
    //  开启定时器每隔3s，自动让a触发点击事件即可
    var as = $('.sales .caption a');
    var index = 0;
    autoplay();
    function autoplay() {
      timer = setInterval(function () {
        index++;
        if (index >= 4) index = 0;
        as.eq(index).click();
      }, 1000);
    }
    // 鼠标经过sales，关闭定时器，离开开启定时器
    $('.sales').on({
      mouseenter: function () {
        clearInterval(timer);
      },
      mouseleave: function () {
        clearInterval(timer);
        autoplay();
      }
    });

    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener('resize', function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();
});

// 销售渠道模块 雷达图
$(function () {
  (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector('.radar'));
    // 2.指定配置

    var option = {
      tooltip: {
        show: true,
        // 控制提示框组件的显示位置
        position: ['60%', '10%']
      },
      radar: {
        indicator: [
          { name: '理工类', max: 100 },
          { name: '民族类', max: 100 },
          { name: '综合类', max: 100 },
          { name: '音乐类', max: 100 },
          { name: '财经类', max: 100 }
        ],
        // 修改雷达图的大小
        radius: '65%',
        shape: 'circle',
        // 分割的圆圈个数
        splitNumber: 4,
        name: {
          // 修饰雷达图文字的颜色
          textStyle: {
            color: '#4c9bfd',
            fontSize: 6
          }
        },
        // 分割的圆圈线条的样式
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255, 0.5)'
          }
        },
        splitArea: {
          show: false
        },
        // 坐标轴的线修改为白色半透明
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
          }
        }
      },
      series: [
        {
          name: '北京',
          type: 'radar',
          // 填充区域的线条颜色
          lineStyle: {
            normal: {
              color: '#fff',
              width: 1,
              opacity: 0.5
            }
          },
          data: [[90, 19, 56, 11, 34]],
          // 设置图形标记 （拐点）
          symbol: 'circle',
          // 这个是设置小圆点大小
          symbolSize: 5,
          // 设置小圆点颜色
          itemStyle: {
            color: '#fff'
          },
          // 让小圆点显示数据
          label: {
            show: true,
            fontSize: 10
          },
          // 修饰我们区域填充的背景颜色
          areaStyle: {
            color: 'rgba(238, 197, 102, 0.6)'
          }
        }
      ]
    };
    // 3.把配置和数据给对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener('resize', function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();
});

// 销售模块 饼形图 半圆形 设置方式
$(function () {
  (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector('.gauge'));
    // 2. 指定数据和配置
    var option = {
      series: [
        {
          name: '销售进度',
          type: 'pie',
          radius: ['130%', '150%'],
          // 移动下位置  套住50%文字
          center: ['48%', '80%'],
          //是否启用防止标签重叠策略
          // avoidLabelOverlap: false,
          labelLine: {
            normal: {
              show: false
            }
          },
          // 饼形图的起始角度为 180， 注意不是旋转角度
          startAngle: 180,
          // 鼠标经过不需要放大偏移图形
          hoverOffset: 0,
          data: [
            {
              value: 100,
              itemStyle: {
                // 颜色渐变#00c9e0->#005fc1
                color: new echarts.graphic.LinearGradient(
                  // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: '#00c9e0' }, // 0 起始颜色
                    { offset: 1, color: '#005fc1' } // 1 结束颜色
                  ]
                )
              }
            },
            {
              value: 100,
              itemStyle: {
                color: '#12274d'
              }
            },
            {
              value: 200,
              itemStyle: {
                color: 'transparent'
              }
            }
          ]
        }
      ]
    };
    // 3. 把数据和配置给实例对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener('resize', function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();
});

$(function () {
  (function () {
    // 1. 准备相关数据
    var hotData = [
      {
        city: '北京',
        sales: '6', 
        flag: true, 
        brands: [
        
          { name: '北京工业大学', flag: true},
          { name: '北京交通大学', flag: true},
          { name: '北京外国语大学', flag: true },
          { name: '中央音乐学院', flag: true },
          { name: '北京林业大学', flag: true },
          { name: '中国民族大学', flag: true }
        ]
      },
      {
        city: '辽宁',
        sales: '6',
        flag: true,
        brands: [
          { name: '大连艺术学院', flag: true},
          { name: '大连科技学院', flag: true},
          { name: '沈阳城市学院', flag: true },
          { name: '沈阳何氏医学院' , flag: true},
          { name: '辽宁财贸学院', flag: true},
          { name: '大连东软信息学院'}
        ]
      },
      {
        city: '河北',
        sales: '3',
        flag: true,
        brands: [
          { name: '河北大学', flag: true },
          { name: '河北科技大学' , flag: true},
          { name: '河北金贸大学', flag: true},
         
        ]
      },
      {
        city: '甘肃',
        sales: '3',
        flag: true,
        brands: [
          { name: '甘肃民族师范学院',  },
          { name: '西北师范大学', flag: true },
          { name: '兰州工商学院', },
       
        ]
      },
      {
        city: '山西',
        sales: '5',
        flag: true,
        brands: [
          { name: '山西晋中理工学院', flag: true },
          { name: '山西医科大学', flag: true },
          { name: '太原科技大学', flag: true },
          { name: '山西财经大学', flag: true },
          { name: '运城职业技术学院', flag: true },
         
        ]
      }
    ];
    //  2. 根据数据渲染各省热销 sup 模块内容
    // (1) 遍历 hotData对象
    var supHTML = '';
    $.each(hotData, function (index, item) {
      supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class=
    ${item.flag ? 'icon-up' : 'icon-down'}></s></span></li>`;
    });
    // 把生成的5个小li字符串给 sub dom盒子
    $('.sup').html(supHTML);

    // 3. 当鼠标进入 tab 的时候
    // 鼠标经过当前的小li要高亮显示
    $('.province .sup').on('mouseenter', 'li', function () {
      index = $(this).index();
      render($(this));
    });

    function render(currentEle) {
      currentEle.addClass('active').siblings().removeClass();
      var subHTML = '';
      $.each(hotData[currentEle.index()].brands, function (index, item) {
        subHTML += `<li><span>${item.name}</span><span> ${item.num}<s class=
    ${item.flag ? 'icon-up' : 'icon-down'}
    ></s></span></li>`;
      });

      $('.sub').html(subHTML);
    }

    // 4. 默认把第一个小li处于鼠标经过状态
    var lis = $('.province .sup li');
    lis.eq(0).mouseenter();

    // 5.开启定时器
    var index = 0;
    var timer = setInterval(function () {
      index++;
      if (index >= 5) index = 0;
      render(lis.eq(index));
    }, 1500);

    $('.province .sup').hover(
      // 鼠标经过事件
      function () {
        clearInterval(timer);
      },
      // 鼠标离开事件
      function () {
        clearInterval(timer);
        timer = setInterval(function () {
          index++;
          if (index >= 5) index = 0;
          render(lis.eq(index));
        }, 1500);
      }
    );
  })();
});
